<template>
	<view class="content">
		<view class="banner">
			<image class="pay_succ" src="../../static/images/massageChair_recordDetail_img.png" mode="widthFix"> </image>
			<view class="pay_text">已支付</view>
		</view>
		<view class="bottom_body">
			<view class="bottom_item">
				<view class="bottom_content">
					<view class="content_title">按摩{{ dataForm.massagetimelong }}分钟</view>
					<view class="content_address">{{ dataForm.advdesc }}</view>
				</view>
				<view class="item_amount">
					<view class="amount"><span>￥</span>{{ dataForm.orderactualamount }}</view>
				</view>
			</view>
			<view class="content_bottom">
				<view class="content_cell">
					<view class="content_cell_left">原      价</view>
					<view class="content_cell_right">{{ dataForm.origprice }}元</view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left">实付金额</view>
					<view class="content_cell_right font_color">{{ dataForm.orderactualamount }}元</view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left">支付方式</view>
					<view class="content_cell_right">微信支付</view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left"><view style="width:68px;">交易单号</view></view>
					<view class="content_cell_right"><view style="width:188px;word-break: break-word;text-align: right;">&nbsp; {{ dataForm.payno }}</view></view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left">订单编号</view>
					<view class="content_cell_right" @click="copy(dataForm.orderno)">{{ dataForm.orderno }}</view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left">支付时间</view>
					<view class="content_cell_right">{{ dataForm.paytime }}</view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left"><view style="width:68px;">地      点</view></view>
					<view class="content_cell_right"><view style="width:188px;">{{ dataForm.address }}</view></view>
				</view>
				<view class="content_cell">
					<view class="content_cell_left">设备编号</view>
					<view class="content_cell_right">{{ dataForm.deviceno }}</view>
				</view>

			</view>
			<view class="tips">如对订单有疑问，请联系客服人员。</view>
			<kefuButton></kefuButton>

		</view>


	</view>
</template>
<script>
import { recordsDetail } from '@/api/massageChair';
import { toast, showConfirm, tansParams } from '@/utils/common'
import kefuButton from "@/components/kefuButton/index.vue";
export default {
	name: 'recordDetail',
	components: { kefuButton },
	data() {
		return {
			imgBaseUrl: "",
			dataForm: {},

		};
	},

	onLoad() {
		const id = this.$route.query.id;
		this.getRecordsList(id);
		console.log('传递的参数值为', id);
	},
	methods: {

		async getRecordsList(id) {
			const res = await recordsDetail({ orderId: id });
			if (res.results.code == 200) {
				this.dataForm = res.results.data;
			} else {
				toast(res.results.message)
			}

		},
		copy(text){
			this.$copyText(text).then( res => {
				toast('复制订单编号成功')
			}
		)
		}

	}
};
</script>
<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f1f2f6;
	min-height: 100%;
	height: auto;
}






.content {
	position: relative;

	.banner {
		width: 100%;
		height: 356rpx;
		padding-top: 52rpx;
		background: linear-gradient(136deg, #56E3FE 0%, #0D7BFB 100%);
		position: relative;

		.pay_succ {
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin: 0 auto;
		}

		.pay_text {
			margin-top: 16rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;

		}

		.corp_info {
			width: 90%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 36rpx;
			z-index: 1;

			.headImage {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				background: #fff;

				.logo {
					display: block;
					width: 100%;
				}
			}

			.pay_text {
				margin-left: 32rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #1F2E49;

			}
		}
	}

	.bottom_body {
		padding: 32rpx 40rpx;
		position: absolute;
		top: 250rpx;
		width: 100%;
		box-sizing: border-box;

		.bottom_item {
			background: #fff;
			padding: 48rpx 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx #E2E4ED;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom_content {
				.content_title {
					font-size: 36rpx;
					font-weight: 600;
					color: #1F2E49;
				}

				.content_address {
					margin-top: 12rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #1F2E49;
					width: 400rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

			}

			.item_amount {
				.amount {
					color: #FE6601;
					font-weight: 600;
					font-size: 48rpx;

					span {
						font-size: 24rpx;
					}

				}

			}
		}

		.content_bottom {
			margin-top: 24rpx;
			width: 100%;
			background: #fff;
			padding: 48rpx 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx #E2E4ED;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.content_cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.content_cell_left {
					font-size: 32rpx;
					color: #76839B;
				}

				.content_cell_right {
					font-size: 32rpx;
					color: #1F2E49;
				}

				.font_color {
					color: #FE6601;
				}

			}

		}

		.marTop24 {
			margin-top: 24rpx;
		}

		.tips {
			margin-top: 14rpx;
			text-align: center;
			font-size: 24rpx;
			color: #1F2E49;
		}

		.kefuButton {
			margin-top: 16rpx;
		}






	}
}</style>
